<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>盒子模型案例</title>
    <style>
     
        * {
            padding: 0; margin: 0;
        }
        body {
            background-color: gray;
        }
        h1 {
            width: 300px; margin: 0 auto; color: green;
        }
        div.box {
            margin: 20px auto;
            width: 298px;
            height: 415px;
            background-color: white;
        }
        img {
            width: 100%;
           height: 40%;
        }
        p.word {
            /* background-color: palegoldenrod; */
            font-size: 14px;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 30px;
            height: 100px;
        }
        div.re {
            /* background-color: pink; */
            font-size: 12px;
            color: gray;
            margin: 40px 20px 0;

        }
        div.info {
            margin: 5px 20px 0;
            font-size: 14px;
        }
        h4.title {
            display: inline-block;
            font-weight: 400;
        }
        span.price {
           
            color: orange;
        }
        em {
            font-style: normal;
           margin: 0 10px 0 20px;
            color: gray;
        }
        a{
            text-decoration: none;
            
        }
    </style>
</head>

<body>
    <div id="root">
        <h1>盒子模型练习</h1>
        <div class="box">
           <a href="#"> <img src="/picture/all.jpeg" alt=""></a>
            <p class="word">{{word}}</p>
            <div class="re">{{re}}</div>
            <div class="info">
                <h4 class="title"><a href="#" style="color: black;">小米蓝牙耳机air3...</a></h4>
                <em>|</em>
                <span class="price">99.9元</span>
            </div>
        </div>
        <h1>盒子模型练习</h1>
        
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                word:Mock.mock('@cword(20)'),
                re:Mock.mock('@cword(10)')
            }
        },
    })
</script>

</html>